<template>
    <div id="part1">
        <h1>基础设置</h1>
        <strong>mutations只能更改简单数据类型的数据（number,string,boolean,nndefined、null）,数组和对象如果不涉及到类型转换则检测不出来</strong>
        <h2>mutations改变store里面数据</h2>
        <h3>mutations只能同步改变数据</h3>
        <add></add>
        <decrease></decrease>
        <input v-model="count1" type="text">
        <p>data里面的count只是简单的赋值并不能跟着改变：{{count1}}。</p>
        <input type="number" v-model="$store.state.num">
        <p>store里面count*num {{$store.getters.total}}</p>
        <p>data里面的total1只是简单的赋值并不能跟着改变：{{total1}}</p>
        <h2>actions改变store里面数据</h2>
        <button @click="add10()">加10</button>
        <button @click="decrease10()">减10</button>
        <hr>
    </div>
</template>
<script>
import add from "./vuexAddCount";
import decrease from "./vuexDecreaseCount";
import { mapState } from "vuex";
export default {
  name: "part1",
  components: {
    add,
    decrease
  },
  data() {
    return {
      count1: this.$store.state.count,
      total1: this.$store.getters.total
    };
  },
  methods: {
    add10: function() {
      this.$store.dispatch("increment", 10);
    },
    decrease10: function() {
      this.$store.dispatch("increment", -10);
    }
  },
};
</script>
<style scoped>
</style>